<template>
	<div>
		<template v-if="type == 'select'">
			<el-select
				:class='className'
				v-model="selectValue"
				:multiple="multiple"
				:clearable='clearable'
				@visible-change='visibleChange'
				@clear="emitValue"
				@change='emitValue'>
				<el-option 
					v-for="item in options"
					:key='item.id'
					:value='item.id'
					:label='item.label'></el-option>
			</el-select>
		</template>
		<template v-if="type == 'cascader'">
			<el-cascader
				:class='className'
				v-model='selectValue'
				:options='options'
				:props="caderProps"
				:clearable='clearable'
				@clear="emitValue"
				@change='emitValue'
				@visible-change='visibleChange'>
			</el-cascader>
		</template>
	</div>
</template>

<script>
	export default {
		props : {
			value : {
			
			},
			//获取数据的key
			code : {
				type : String,
				default : ''
			},
			//获取数据的类型
			type : {
				type : String,
				default : 'select'
			},
			//选项类型 , common表示从通用数据选择字典里拉数据
			selectType : {
				type : String,
				default : ''
			},
			//是否允许多选
			multiple :{
				type : Boolean,
				default : false
			},
			//是否可清除
			clearable : {
				type : Boolean,
				default : true
			},
			//自定义类名
			className : {
				type : String,
				default : ''
			},
			//是否懒载
			lazy : {
				type : Boolean,
				default : true
			},
			caderProps :{
				type : Object,
				default : _ => {
					return {
						value : 'id',
						label : 'label',
						multiple : false,//是否可多选
					}
				}
			},
		},
		watch: {
			value : {
				handler (n) {
					this.selectValue = n;
					if (n) {
						this.getOptions();
					}
				},
				immediate :true
			}
		},
		data () {
			return  {
				selectValue : null,
				options : null
			}
		},
		created () {
			if (!this.code) return;
			if (!this.lazy) {
				this.getOptions();
			}
			
		},
		methods: {
			visibleChange (visible) {
				if (visible) {
					this.getOptions();
				}
			},
			getOptions () {
				this.__api.common.getOptionsByKey({
					key :this.code,
					type : this.type,
					select_type : this.selectType
				}).then(res => {
					this.options = res;
				})
			},
			emitValue () {
				this.$emit('input', this.selectValue)
			}
		}
	}
</script>

<style>
</style>
